<template>
  <div class="cart" :class="{ bgc: cartLength === 0 }">
    <nav-bar class="nac-bar">
      <div slot="center" class="center">购物车({{ cartLength }})</div>
    </nav-bar>

    <cart-list></cart-list>
    <cart-bottom-bar @calcClick="calcClick"></cart-bottom-bar>
    <cart-buy
      v-if="isCartBuy"
      :cart-account="cartAccount"
      :buy-price="buyPrice"
    ></cart-buy>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar.vue";
import CartList from "./childComps/CartList.vue";
import CartBottomBar from "./childComps/CartBottomBar.vue";
import Scroll from "components/common/scroll/Scroll.vue";
import CartBuy from "./childComps/CartBuy";

import { mapGetters } from "vuex";
export default {
  name: "Cart",
  components: {
    NavBar,
    CartList,
    CartBottomBar,
    Scroll,
    CartBuy,
  },

  data() {
    return {
      isShowBgc: 1,
      isCartBuy: false,
      cartAccount: "",
      buyPrice: "",
    };
  },
  created() {
    // 取出并转化解析之前的购物车数据
    const oldCartList = JSON.parse(window.localStorage.getItem("cartList"));
    if (oldCartList) {
      console.log(oldCartList);
      console.log(this.$store.state.cartList);
      this.$store.commit("oldCartList", oldCartList);
    } else {
      console.log("oldCartList无值");
    }
  },
  deactivated() {
    window.localStorage.setItem(
      "cartList",
      JSON.stringify(this.$store.state.cartList)
    );
  },
  methods: {
    calcClick(totalPrice) {
      this.isCartBuy = true;
      this.cartAccount = "结算成功";
      this.buyPrice = totalPrice + "块";

      setTimeout(() => {
        this.isCartBuy = false;
      }, 1000);
    },
  },

  computed: {
    // cartLength() {
    //   return this.$store.state.cartList.length;
    // },
    ...mapGetters(["cartLength"]),
  },
};
</script>

<style scoped>
.cart {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: url("../../assets/img/regisetr/login2.jpg");
  background-size: cover;
}

.bgc {
  background: url("~assets/img/cart/cart_bgc.png") center no-repeat !important;
}

.nav-bar {
  background-color: var(--color-tint);
  color: #fff;
  /* font-weight: 700; */
}
.center {
  background-color: var(--color-tint);
  color: white;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 3px;
}
</style>
